<template>
	<view class="conent">
		<!-- <u-navbar title="购物车" titleStyle="font-weight: 800;margin-top:80rpx;" :is-back="false" :safeAreaInsetTop="false"
			height="180rpx">
		</u-navbar> -->
		<view class="conent_box">
			<view class="shop" v-if="cartList.length>0">

				<u-list :height="cartList.length*103">
					<u-list-item v-for="(item,index) in cartList" :key="index">
						<u-row
							customStyle="padding:40rpx 20rpx;position: relative;;border-bottom:1rpx solid #F4F5F6;border-radius:20rpx;">
							<u-col span="2">
								<!-- <view class="circle" :style="'background':stampList.includes(item)?'#ff0000':''"></view> -->
								<view class="circle" @click="addPay(index)"
									:style="{border:stampList.includes(item)? 'none':'1rpx solid #999'}">
									<u-icon v-if="stampList.includes(item)" name="checkmark-circle-fill" size="30"
										color="#ff0000"></u-icon>
								</view>
							</u-col>
							<u-col span="3">
								<u--image :src="item.goodsImage" width="60" height="60" radius="10"></u--image>
							</u-col>
							<u-col span="7">
								<u-row>
									<u-col span="7">
										<u--text :text="item.goodsName+' '+item.specName" align="left" lines="1"
											lineHeight="30" color="#01221D"></u--text>
									</u-col>
									<u-col span="5">
										<u--text :text="item.price" mode="price" size="16" bold align="right"
											color="#01040D"></u--text>
									</u-col>
								</u-row>
								<u-number-box v-model="item.quantity" integer @change="numberChange"></u-number-box>
							</u-col>
							<u-button v-if="stamp" text="" icon="close-circle" @click="expurgate(item.cartId)"
								customStyle="width:40rpx;height:40rpx;border:none; position:absolute;top:0;right:0;"></u-button>
						</u-row>
					</u-list-item>
				</u-list>
			</view>
			<view class="shopNull" v-else>
				<u--image src="https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/shopNull.png"
					customStyle="margin:auto;"></u--image>
				<u--text text="购物车空空如也" align="center" color="#8991A4"></u--text>
			</view>
		</view>
		<view class="flex">
			<u-row>
				<u-col span="2" v-if="cartList.length>0">
					<u-button :text="cartList.toString()=== stampList.toString()?'取消':'全选'" @click="chooseAll"
						type="warning" :plain="true" size="small"
						customStyle="margin-top:10rpx;border-radius:32rpx;"></u-button>
				</u-col>
				<u-col span="1" v-if="cartList.length>0">
				</u-col>
				<u-col :span="cartList.length>0?'3':'6'">
					<u--text text="合计" color="#8991A4"></u--text>
				</u-col>
				<u-col span="6">
					<u--text :text="priceAll/100" mode="price" align="right" size="24" lineHeight="60" bold
						color="#FF7643"></u--text>
				</u-col>
			</u-row>
			<u-row>
				<u-col :span="cartList.length>0?'8':'12'">
					<u-button text="结账" @click="payGoods" :disabled="!cartList.length>0"
						customStyle="border:none;color:#fff;background:#07BFA5;border-radius:16rpx;"></u-button>
				</u-col>
				<u-col span="1" v-if="cartList.length>0"></u-col>
				<u-col span="3" v-if="cartList.length>0">
					<u-button text="编辑" v-if="!stamp" @click="redact" plain color="#07BFA5"
						customStyle="border-radius:16rpx;"></u-button>
					<u-button text="取消" v-else @click="countermand" plain color="#07BFA5"
						customStyle="border-radius:16rpx;"></u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import router from '@/api/router';
	import {
		goods,
		cart,
		addCart,
		updateCart,
		deleteCart,
		pay
	} from "@/api/pages/goods.js"
	// import {
	// 	list
	// } from "@/api/pages/address.js"
	const cartList = ref([])
	const priceAll = ref(0)
	const stamp = ref(false)
	const stampList = ref([])
	const payForm = ref({
		addressId: '',
		items: []
	})
	const address = ref({})
	onMounted(() => {
		getCart()
	})
	watch(
		() => stampList,
		(val) => {
			priceAll.value = 0
			stampList.value.forEach((item, index) => {
				priceAll.value = priceAll.value + (item.price * 100) * item.quantity
			});
		}, {
			deep: true,
			immediate: true,
		}
	)
	const chooseAll = () => {
		if (stampList.value == cartList.value) {
			stampList.value = []
		} else {
			stampList.value = cartList.value
		}
	}
	const addPay = (index) => {
		if (stampList.value.includes(cartList.value[index])) {
			stampList.value = stampList.value.filter(ite => ite !== cartList.value[index]);
		} else {
			stampList.value = stampList.value.concat(cartList.value[index])
		}
		console.log(cartList.value.toString() === stampList.value.toString());
	}
	const expurgate = (i) => {
		console.log("expurgate===", i);
		uni.showModal({
			title: '提示',
			content: '确定将该商品移除购物车吗？',
			success: function(res) {
				if (res.confirm) {
					deleteGoods(i)
					// console.log('确认');
				} else if (res.cancel) {
					console.log('取消');
				}
			}
		})
		event.stopPropagation()
	}
	const redact = () => {
		stamp.value = true
	}
	const countermand = () => {
		stamp.value = false
	}
	const payGoods = () => {
		if (!stampList.value.length > 0) {
			uni.showToast({
				title: "请在购物车中选择需要支付的商品",
				icon: 'none'
			})
			return
		}
		router.navigateTo({
			url: '/pageB/order/confirm?items=' + JSON.stringify(stampList.value)
		})
		// getAddressList({
		// 	pageNo: 1,
		// 	pageSize: 99
		// })
	}
	const getCart = async () => {
		const res = await cart().then()
		cartList.value = res.result
	}
	const deleteGoods = async (id) => {
		const res = await deleteCart(id).then(e => {
			uni.showToast({
				title: e.message,
				icon: 'none'
			})
			getCart()
		})
	}
	// const payOrder = async (form) => {
	// 	const res = await pay(form).then()
	// 	if (res.code == 200) {
	// 		uni.requestPayment({
	// 			provider: 'wxpay', // 服务提提供商
	// 			appId: res.result.appId,
	// 			timeStamp: JSON.stringify(res.result.timeStamp), // 时间戳
	// 			nonceStr: res.result.nonceStr, // 随机字符串
	// 			package: res.result.prepayId,
	// 			signType: 'SHA256withRSA', // 签名算法
	// 			paySign: res.result.sign, // 签名

	// 			success: function(ess) {
	// 				console.log('支付成功', ess);
	// 				// 业务逻辑。。。
	// 				// router.navigateTo({
	// 				// 	url: '/pageB/order/succeed',
	// 				// })
	// 				router.navigateTo({
	// 					url: '/pageB/order/succeed?payForm=' + JSON.stringify({
	// 						orderId: res.result.orderId,
	// 						priceAll: priceAll.value,
	// 						address: address.value,
	// 						items: payForm.value.items
	// 					})
	// 				})
	// 			},
	// 			fail: function(err) {
	// 				console.log('支付失败', err);
	// 			}
	// 		})
	// 	}
	// }
	// const getAddressList = async (form) => {
	// 	const res = await list(form).then()
	// 	if (!res.result.records.length > 0) {
	// 		uni.showModal({
	// 			title: '提示',
	// 			content: '地址列表为空，需要添加有效地址',
	// 			success: function(res) {
	// 				if (res.confirm) {
	// 					router.navigateTo({
	// 						url: "/pageD/feature/address"
	// 					})
	// 					// console.log('确认');
	// 				} else if (res.cancel) {
	// 					console.log('取消');
	// 				}
	// 			}
	// 		})
	// 		return
	// 	}
	// 	if (!stampList.value.length > 0) {
	// 		uni.showToast({
	// 			title: "请在购物车中选择需要支付的商品",
	// 			icon: 'none'
	// 		})
	// 	} else {
	// 		// console.log("支付开始")
	// 		// payForm.value = {
	// 		// 	addressId: address.value.id,
	// 		// 	items: stampList.value.map(n => {
	// 		// 		return {
	// 		// 			specId: n.specId,
	// 		// 			specPrice: n.price,
	// 		// 			specQuantity: n.quantity
	// 		// 		}
	// 		// 	})
	// 		// }
	// 		// payOrder(payForm.value)
	// 	}
	// 	address.value = res.result.records[0]
	// }
	const numberChange = (e) => {
		console.log(e, cartList.value);
	}
</script>

<style lang="scss" scoped>
	.conent_box {
		margin-top: 0;
		padding-bottom: 460rpx;

		.shop,
		.shopNull {
			margin: 10rpx;
			padding: 40rpx;
			background-color: #fff;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
			border-radius: 20rpx;
		}

		.shop {
			padding: 20rpx;

			:deep(.u-number-box__minus),
			:deep(.u-number-box__plus) {
				border-radius: 50%;
			}

			.circle {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}

	}

	.flex {
		position: fixed;
		bottom: 0;
		width: 90%;
		padding: 20rpx 5%;
		// height: 100rpx;
		background-color: #fff;
	}
</style>